<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="400"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Clear canvas with a white background
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Global style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    
    // --- Parameters ---
    const cx = 250;
    const cy = 180;
    const radius = 80;

    // --- Draw horizontal lines for the medium ---
    ctx.lineWidth = 1.5;
    const lineSpacing = 15;
    const startX = 40;
    const endX = canvas.width - 40;
    // Iterate over y-positions to draw the lines
    for (let y = cy - radius - 2 * lineSpacing; y < cy + radius + 3 * lineSpacing; y += lineSpacing) {
        // Check if the line intersects the circle
        if (Math.abs(y - cy) < radius - 1) { // -1 to avoid touching the circle line perfectly
            // Calculate intersection points using circle equation
            const dx = Math.sqrt(radius * radius - (y - cy) * (y - cy));
            const x1 = cx - dx;
            const x2 = cx + dx;
            
            // Draw left segment
            ctx.beginPath();
            ctx.moveTo(startX, y);
            ctx.lineTo(x1, y);
            ctx.stroke();

            // Draw right segment
            ctx.beginPath();
            ctx.moveTo(x2, y);
            ctx.lineTo(endX, y);
            ctx.stroke();
        } else {
            // Draw a full line segment if it's outside the circle's vertical span
            ctx.beginPath();
            ctx.moveTo(startX, y);
            ctx.lineTo(endX, y);
            ctx.stroke();
        }
    }
    
    // --- Draw the circle (sphere) ---
    ctx.lineWidth = 3; // Use a thicker line for the circle's boundary
    ctx.beginPath();
    ctx.arc(cx, cy, radius, 0, 2 * Math.PI);
    ctx.stroke();
    
    // --- Draw the radii inside the circle ---
    ctx.lineWidth = 2; // Reset to a standard line width for internal lines
    // First radius (part of the sector for label 'a')
    const angle1_deg = 30;
    const angle1_rad = angle1_deg * Math.PI / 180;
    const endX1 = cx + radius * Math.cos(angle1_rad);
    const endY1 = cy - radius * Math.sin(angle1_rad); // y-coordinates are inverted in canvas
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(endX1, endY1);
    ctx.stroke();

    // Second radius (part of the sector)
    const angle2_deg = 135;
    const angle2_rad = angle2_deg * Math.PI / 180;
    const endX2 = cx + radius * Math.cos(angle2_rad);
    const endY2 = cy - radius * Math.sin(angle2_rad); // y-coordinates are inverted in canvas
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(endX2, endY2);
    ctx.stroke();

    // --- Draw the position vector 'r' ---
    const r_angle_deg = 160;
    const r_angle_rad = r_angle_deg * Math.PI / 180;
    const r_len = radius * 1.4;
    const r_endX = cx + r_len * Math.cos(r_angle_rad);
    const r_endY = cy - r_len * Math.sin(r_angle_rad); // y-coordinates are inverted
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(r_endX, r_endY);
    ctx.stroke();

    // Draw the arrowhead for 'r'
    const headlen = 15;
    ctx.save();
    ctx.translate(r_endX, r_endY);
    ctx.rotate(-r_angle_rad); // Rotate the context to align with the vector
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(-headlen, headlen / 3.5);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(-headlen, -headlen / 3.5);
    ctx.stroke();
    ctx.restore(); // Restore the original context state

    // --- Add Labels ---
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Label 'a'
    ctx.font = "italic 22px 'Times New Roman'";
    // Position 'a' within the drawn sector
    const label_a_angle_deg = 80;
    const label_a_angle_rad = label_a_angle_deg * Math.PI / 180;
    const label_a_r = radius * 0.5;
    const label_a_x = cx + label_a_r * Math.cos(label_a_angle_rad);
    const label_a_y = cy - label_a_r * Math.sin(label_a_angle_rad);
    ctx.fillText("a", label_a_x, label_a_y);

    // Label 'r'
    ctx.font = "bold 22px 'Times New Roman'";
    ctx.fillText("r", cx - 115, cy - 80);

    // Label 'ε' (Epsilon)
    ctx.font = "italic 22px 'Times New Roman'";
    ctx.fillText("\u03B5", cx + radius + 35, cy);

    // Caption
    ctx.font = "bold 20px 'Times New Roman'";
    ctx.fillText("Fig. 1.52", cx, canvas.height - 30);

</script>
</body>
</html>